<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>在线考试系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
    <meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
    <!--<script type="text/javascript">
        Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
        Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
        Cufon.replace('h3',{ textShadow: '1px 1px #000'});
        Cufon.replace('.back');
    </script>-->
</head>
<body>
<div class="wrapper">
    <h1 style="align-content: center">在线考试系统</h1><br>
    <div class="content" style="padding-left: -100px">
        <div id="form_wrapper" class="form_wrapper">
            <form  id="regis" class="register active">
                <h3>注册页面(基本信息)</h3>
                <div class="column">
                    <div>
                        <label>登录账号:</label>
                        <input name="account" type="text"/>
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>姓名:</label>
                        <input name="personname" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>身份证号:</label>
                        <input name="personidcard" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>密码:</label>
                        <input name="pwd" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>手机号:</label>
                        <input name="phone" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>邮箱:</label>
                        <input name="email" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                </div>
                <div class="column">
                    <div>
                        <label>性别:</label>
                        <select class="op" name="gender">
                            <option  value="男">男</option>
                            <option  value="女">女</option>
                        </select>
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>学历:</label>
                        <input name="education" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>民族:</label>
                        <input name="nation" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>年龄</label>
                        <select class="op" name="age">
                            <option  value="20">20</option>
                            <option  value="30">30</option>
                            <option  value="25">25</option>
                        </select>
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>QQ:</label>
                        <input name="qq" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>微信:</label>
                        <input name="wechat" type="text" />
                        <span class="error">This is an error</span>
                    </div>
                </div>
                <div class="bottom">
                    <nav class="teaandstu">
                        <input type="button"  value="教师"  onclick="viewtea()"/>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="button"  value="学生"  onclick="viewstu()"/>
                    </nav>
                    <div id="teacher" >
                        <div class="column">
                            <div>
                                <label>教师号:</label>
                                <input name="teachernumber" type="text"/>
                                <span class="error">This is an error</span>
                            </div>
                            <div>
                                <label>入职时间:</label>
                                <input name="teacherentertime" type="date" class="dd" value="2014-01-13"/>
                                <span class="error">This is an error</span>
                            </div>
                        </div>
                        <div class="column">
                            <div>
                                <label>授课范围:</label>
                                <input name="teachercourse" type="text"/>
                                <span class="error">This is an error</span>
                            </div>
                        </div>
                    </div>
                    <div id="student" >
                        <div class="column">
                            <div>
                                <label>学号:</label>
                                <input name="studentnumber" type="text"/>
                                <span class="error">This is an error</span>
                            </div>
                            <div>
                                <label>班级:</label>
                                <!--<input name="classid" type="" />-->
                                <select class="op" name="classid">
                                    <option  value="1">计算机1班</option>
                                    <option  value="2">信管2班</option>
                                    <option  value="3">软件工程</option>
                                </select>

                                <span class="error">This is an error</span>
                            </div>
                            <div>
                                <label>专业:</label>
                                <input name="studentspecaity" type="text" />
                                <span class="error">This is an error</span>
                            </div>
                        </div>
                        <div class="column">
                            <div>
                                <label>系别:</label>
                                <input name="studentdept" type="text"/>
                                <span class="error">This is an error</span>
                            </div>
                            <div>
                                <label>入学时间:</label>
                                <input name="studentintake" type="date" class="dd" value="2014-01-13"/>
                                <span class="error">This is an error</span>
                            </div>
                            <div>
                                <label>毕业时间:</label>
                                <input name="studentgraduate" type="date" class="dd" value="2014-01-13"/>
                                <span class="error">This is an error</span>
                            </div>
                        </div>
                    </div>
                    <input id="re" type="button" value="注册" onclick="reg()"/>
                    <!--<a href="login.html"  class="linkform">已经有账户？点此登录</a>-->
                    <a href="login.html">已经有账户？点此登录</a>
                    <div class="clear"></div>
                </div>
            </form>

        </div>
        <div class="clear"></div>
    </div>
</div>


<!-- The JavaScript -->
<script src="js/register.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        //the form wrapper (includes all forms)
        var $form_wrapper	= $('#form_wrapper'),
            //the current form is the one with class active
            $currentForm	= $form_wrapper.children('form.active'),
            //the change form links
            $linkform		= $form_wrapper.find('.linkform');

        //get width and height of each form and store them for later
        $form_wrapper.children('form').each(function(i){
            var $theForm	= $(this);
            //solve the inline display none problem when using fadeIn fadeOut
            if(!$theForm.hasClass('active'))
                $theForm.hide();
            $theForm.data({
                width	: $theForm.width(),
                height	: $theForm.height()
            });
        });

        //set width and height of wrapper (same of current form)
        setWrapperWidth();

        /*
        clicking a link (change form event) in the form
        makes the current form hide.
        The wrapper animates its width and height to the
        width and height of the new current form.
        After the animation, the new form is shown
        */
        $linkform.bind('click',function(e){
            var $link	= $(this);
            var target	= $link.attr('rel');
            $currentForm.fadeOut(400,function(){
                //remove class active from current form
                $currentForm.removeClass('active');
                //new current form
                $currentForm= $form_wrapper.children('form.'+target);
                //animate the wrapper
                $form_wrapper.stop()
                    .animate({
                        width	: $currentForm.data('width') + 'px',
                        height	: $currentForm.data('height') + 'px'
                    },500,function(){
                        //new form gets class active
                        $currentForm.addClass('active');
                        //show the new form
                        $currentForm.fadeIn(400);
                    });
            });
            e.preventDefault();
        });

        function setWrapperWidth(){
            $form_wrapper.css({
                width	: $currentForm.data('width') + 'px',
                height	: $currentForm.data('height') + 'px'
            });
        }

        /*
        for the demo we disabled the submit buttons
        if you submit the form, you need to check the
        which form was submited, and give the class active
        to the form you want to show
        */
        $form_wrapper.find('input[type="submit"]')
            .click(function(e){
                e.preventDefault();
            });
    });
</script>
</body>
</html>